<template>
	<view class="box">
		<view class="banner-bg-detail">

			<view class="banner-detail">
				<image src="../../static/image/helpDetail_1.png" mode="" class="bg"></image>
				<view class="detail-box">
					<view class="card-title">
						互助权益电子凭证
					</view>
					<view class="card-user-info flex flai fljc">
						<text>{{info.fullName}}</text>
						<text>NO.{{info.capital.id}}</text>
					</view>
					<view class="card-plan">
						大病互助计划 | 等待期
					</view>
					<view class="card-bottom flex flai fljcsb">
						<view class="card-bottom-left">
							存证哈希 查看 <image src="../../static/image/arrow-right-white.png" mode=""></image>
						</view>
						<view class="card-bottom-right flex flai">
							<image src="../../static/image/myHelp_13.png" mode=""></image>
							<text>资产权益</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="property-info-box flex flai">
			<view class="flex1">
				<text>{{info.days}}</text>
				<text>持有天数</text>
			</view>
			<view class="flex1">
				<text>42</text>
				<text>总发电量(kw/h)</text>
			</view>
			<view class="flex1">
				<text>30</text>
				<text>累计收益(元)</text>
			</view>
		</view>
		<view class="slide-property">
			<scroll-view scroll-x="true" class="tab-h" :scroll-left="scrollLeft">
				<view class="flex flai fljcsb property-nav">
					<view class="tab-item" :class="[currentTab==index?'active':'']" :data-current="index" v-for="(item,index) in navList"
					 :key="" @click="swichNav">{{item}}</view>
				</view>
			</scroll-view>
			<swiper class="tab-content" :class="[currentTab==0?'property-swiper':'']" :current="currentTab" duration="300"
			 @change="switchTab">
				<!-- 电站详情 -->
				<swiper-item>
					<view class="section-box" style="padding: 0;">

						<view class="condition-rule table property-table">

							<view class="property-table-head">
								基本情况
							</view>
							<view class="table-tr flex">
								<text class="flex1">装机总容量</text>
								<text class="flex1">{{info.station.totalCapacity}}KW</text>
							</view>
							<view class="table-tr flex">
								<text class="flex1">上网电价</text>
								<text class="flex1">{{info.station.onNetPrice}}元/kwh</text>
							</view>
							<view class="table-tr flex">
								<text class="flex1">自发自用电价</text>
								<text class="flex1">{{info.station.selfPrice}}元/kwh</text>
							</view>
							<view class="table-tr flex">
								<text class="flex1">自发自用占比</text>
								<text class="flex1">{{info.station.selfRatio*100}}%</text>
							</view>
							<view class="table-tr flex">
								<text class="flex1">电站预计年发电量</text>
								<text class="flex1">{{info.station.predictYearQuantity}}kwh</text>
							</view>
							<view class="property-table-head">
								产品参数
							</view>
							<view class="table-tr flex">
								<text class="flex1">采集器品牌</text>
								<text class="flex1">光伏</text>
							</view>
							<view class="table-tr flex">
								<text class="flex1">逆变器品牌</text>
								<text class="flex1">光伏</text>
							</view>
							<view class="table-tr flex">
								<text class="flex1">组件品牌</text>
								<text class="flex1">光伏</text>
							</view>
							<view class="table-tr flex">
								<text class="flex1">组件型号</text>
								<text class="flex1">1234567890</text>
							</view>
							<view class="table-tr flex">
								<text class="flex1">组件块数</text>
								<text class="flex1">46</text>
							</view>
							<view class="table-tr flex">
								<text class="flex1">安装日期</text>
								<text class="flex1">{{info.station.setupDate}}</text>
							</view>
							<view class="table-tr flex">
								<text class="flex1">并网日期</text>
								<text class="flex1">{{info.station.onGridDate}}</text>
							</view>
							<view class="property-table-head">
								持有信息
							</view>
							<view class="table-tr flex">
								<text class="flex1">建站公司</text>
								<text class="flex1">{{info.station.buildCompany}}</text>
							</view>
							<view class="table-tr flex">
								<text class="flex1">运营公司</text>
								<text class="flex1">{{info.station.operateCompany}}</text>
							</view>
							<view class="table-tr flex">
								<text class="flex1">电站地址</text>
								<text class="flex1">{{info.station.address}}</text>
							</view>
						</view>
						<view class="map-btn">GIS地图</view>
					</view>

				</swiper-item>
				<!-- 发电详情 -->
				<swiper-item>
					<view class="electricity-box flex flai">
						<view class="flex1">
							<text>42714.37</text>
							<text>累计发电量(kw)</text>
						</view>
						<view class="flex1">
							<text>441</text>
							<text>累计发电量(kw)</text>
						</view>
					</view>
					<view class="electricity-tab flex">
						<text :class="[b==1?'day-active':'']" @click="dayTab(1)">日</text>
						<text :class="[b==2?'mon-active':'']" @click="dayTab(2)">月</text>
						<text :class="[b==3?'year-active':'']" @click="dayTab(3)">年</text>
					</view>
					<view class="echar-box1">
						<!-- 引入的mpvue-echarts组件 -->

						<canvas canvas-id="canvasColumn" id="canvasColumn" class="echar-box1"></canvas>
					</view>
				</swiper-item>
				<!-- 收益情况 -->
				<swiper-item>
					<view class="earnings-box flex flai">

						<text>累计收益(元)</text>
						<text>60.62</text>
					</view>
					<view class="echar-box2">
						<!-- 引入的mpvue-echarts组件 -->

						<canvas canvas-id="canvasTwo" id="canvasTwo" class="echar-box1"></canvas>
					</view>
				</swiper-item>
				<!-- 相关文件 -->
				<swiper-item>
					<view class="file-box">
						<navigator url="">并网文件</navigator>
						<navigator url="">备案文件</navigator>
						<navigator url="">保险协议</navigator>
						<navigator url="">电站安装图</navigator>
						<navigator url="">现场施工图</navigator>
					</view>
				</swiper-item>
			</swiper>

		</view>
	</view>
</template>

<script>
	import uCharts from '../../components/u-charts/u-charts.js';
	var _self;
	var canvaLineA = null;
	import api from '../../api/index.js'
	export default {
		components: {

		},
		data() {
			return {
				navList: ['电站详情', '发电情况', '收益情况', '相关文件'],
				navList2: [{}, {}, {}, {}, {}],
				num: 1,
				currentTab: 0, //预设当前项的值
				scrollLeft: 0, //tab标题的滚动条位置
				b: 1,
				cWidth: '',
				cHeight: '',
				pixelRatio: 1,
				info:{},
				chartData: {
					categories: ['2012', '2013', '2014', '2015', '2016', '2017'],
					series: [{
						name: '',
						data: [820, 932, 901, 934, 1290, 1330, 1320],
						color: '#2fc25b'
					}]
				},
				chartDataTwo: {
					categories: ['2012', '2013', '2014', '2015', '2016', '2017'],
					series: [{
						name: '',
						data: [820, 932, 901, 934, 1290, 1330, 1320],
						color: '#FF9D02'
					}]
				}
			}
		},
		onLoad(opt) {
			console.log(opt)
			_self = this;
			this.cWidth = uni.upx2px(750);
			this.cHeight = uni.upx2px(500);
			this.getServerData();
			this.getEarningsData();
			this.getList(opt.orderId)
			this.getElectricityDetail(opt.orderId)
			this.getEarningsDetail(opt.orderId)
		},
		mounted() {

		},
		methods: {
			
			// 发电情况
			getElectricityDetail(id){
				var data = {
					type:this.b,
					id:id
				}
				api.myHelp.electricityDetail(data).then(res=>{
					if (res.code == 1) {
						var list = res.data
						var val = []
						var dateList = []
						for (var k in list) {
							val.push(list[k].val)
							dateList.push(list[k].date)
						}
						this.chartData.categories = dateList
						this.chartData.series.data = val
					}
				})
			},
			// 电站详情
			getList (id) {
				api.myHelp.myPropertyDetail({id:id}).then(res=>{
					if (res.code == 1) {
						this.info = res.data
					}
				})
			},
			// 收益详情
			getEarningsDetail(id){
				var data = {
					type:1,
					id:id
				}
				api.myHelp.earningsDetail(data).then(res=>{
					if (res.code == 1) {
						var list = res.data
						var val = []
						var dateList = []
						for (var k in list) {
							val.push(list[k].val)
							dateList.push(list[k].date)
						}
						this.chartDataTwo.categories = dateList
						this.chartDataTwo.series.data = val
					}
				})
			},
			getEarningsData() {
				this.showLineA('canvasTwo', this.chartDataTwo)
			},
			getServerData() {
				this.showLineA('canvasColumn', this.chartData)
			},

			showLineA(canvasId, chartData) {
				canvaLineA = new uCharts({
					$this: _self,
					canvasId: canvasId,
					type: 'area',
					fontSize: 11,
					legend: {
						show: true
					},
					dataLabel: false,
					dataPointShape: true,
					background: '#FFFFFF',
					pixelRatio: _self.pixelRatio,
					categories: chartData.categories,
					series: chartData.series,
					animation: true,
					xAxis: {
						type: 'grid',
						gridColor: '#fff',
						gridType: 'dash',
						dashLength: 8
					},
					yAxis: {
						gridType: 'dash',
						gridColor: '#fff',
						dashLength: 8,
						splitNumber: 5,
						min: 10,
						max: 180

					},
					width: _self.cWidth * _self.pixelRatio,
					height: _self.cHeight * _self.pixelRatio,
					extra: {

						area: {
							type: 'straight',
							opacity: 0.3,
							addLine: true,
							width: 2
						}
					}
				});

			},
			// 拨打电话
			call() {
				uni.makePhoneCall({
					phoneNumber: '114'
				});
			},
			// 电力日期选择
			dayTab(index) {
				this.b = index
			},
			largeClassifyTab(index) {
				this.num = index
			},
			// 滚动切换标签样式
			switchTab: function(e) {
				this.currentTab = e.detail.current

				this.checkCor();
			},
			// 点击标题切换当前页时改变样式
			swichNav: function(e) {

				var cur = e.currentTarget.dataset.current;
				if (this.currentTab == cur) {
					return false;
				} else {
					this.currentTab = cur
				}
			},
			//判断当前滚动超过一屏时，设置tab标题滚动条。
			checkCor: function() {
				if (this.currentTab > 4) {
					this.scrollLeft = 300

				} else {
					this.scrollLeft = 0
				}
			},
		}
	}
</script>

<style>
	@import "../../static/css/common.css";
	@import url("./myMutualHelp.css");
</style>
